<template>
	<view class="DazisCommunity flex">
		<view v-if="showEmpty">
			<view class="my-orders-index-empty">暂无文章</view>
		</view>
		<view style="margin: 20rpx auto;">
			<template v-for="(item,index) in list">
				<view class="DaziCommunityNearTour flex" @tap="goToNewPage(item)" style="flex-wrap: wrap;">
					<view style="display: flex; justify-content: space-between; width: 100%;">
						<view class="title">
							{{ item.title | truncate(15)}}
						</view>
						<view style="color: #979797; font-size: 24rpx; width: 360rpx;">
							{{ item.updateTime }}
						</view>
					</view>
					<view class="imgBox">
						<image :src="item.coverList && item.coverList.length > 0 ? item.coverList[0] : ''" mode=""
							style="width: 120rpx;height: 120rpx;"></image>
					</view>
					<view style="width: 100%; display: flex; margin-top: 40rpx; color: #979797; font-size: 28rpx;">
						{{ item.content | truncate(20) }}
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		bbsList
	} from '../../api/bbs';
	import {
		navigateTo,
		getProvider,
		showModal,
		uniLogin
	} from "../../utils/promise"
	// import EntertainmentActivities from '../../components/EntertainmentActivities/EntertainmentActivities.vue';
	export default {
		data() {
			return {
				current: 0,
				bbsAll: [],
				list: {},
				gfdata: [],
				showEmpty: true
			};
		},
		onShow() {
			this.getbbsList(111)
		},
		filters: {
		    truncate(value, length) {
		      if (!value) return ''
		      if (value.length > length) {
		        return value.substring(0, length) + '...'
		      }
		      return value
		    }
		},
		methods: {
			navigateTo,
			//tabs
			click(item) {
				this.current = item.index;
				this.getbbsList(this.current)
			},
			// goToNangChang() {
			// 	uni.navigateTo({
			// 		url: "/pages/NanChangPage/NanChangPage"
			// 	});
			// },
			getbbsList(index) {
				bbsList({
					type: index
				}).then((res) => {
					const {
						code,
						data,
						msg
					} = res
					if (code === 200) {
						this.list = data.records
						this.showEmpty = (this.list.length === 0);
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			goToNewPage(item) {
				this.$emit("gotoNewPage")

				navigateTo({
					url: `/pages/ArticleDetails/ArticleDetails?id=` + item.id
				})
			}
		},

		components: {
			// EntertainmentActivities
		}
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.DazisCommunity {
		width: 100vw;
		background-color: rgb(247, 247, 247);
		box-sizing: border-box;
		font-family: 'PingFang SC';
		text-align: center;

		.my-orders-index-empty {
			background: #fff;
			width: 100%;
			height: 600rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.DaziCommunityNearTour {
			width: 690rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			background: #FFFFFF;
			margin: 20rpx auto 0 auto;
			padding: 30rpx;
			font-family: 'PingFang SC';
			font-weight: 400;
			letter-spacing: -0.82rpx;

			.title {
				font-weight: bold;
				font-size: 26rpx;
				text-align: left;
				width: 100%;
			}

			.imgBox {
				width: 100%;
				margin-top: 20rpx;
				text-align: left;
			}

			.left {
				// width: 120rpx;
				// height: 120rpx;
				// border-radius: 8rpx;
				// background: #D9D9D9;
			}

			.right {
				margin-left: 20rpx;
				flex: 1;

				.r_top {
					display: flex;
				}


				.r_bottom {
					font-size: 26rpx;
					color: #979797;
					margin-top: 32rpx;

					.rb_left {
						text-align: left;
						width: 260rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

				}
			}

		}
	}
</style>